Size Change: +135 B (+0.01%)

Total Size: 1.84 MB

_{compressed-size-action}

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: afercia <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: cbravobernal <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Design Cc @WordPress/gutenberg-design
So far, I moved the 'is connected' message to the settings panel card and used the 'connection' icon. Any design feedback welcome. Screenshot

Can you include a before/after for comparison? I'm not sure what I'm looking at here.

Can you include a before/after for comparison? I'm not sure what I'm looking at here.

The 'before' screenshots are on the associated issue #67579

The 'before' screenshots are on the associated issue #67579

Instead of hunting, it'd be great if you brought these front-and-center, so reviewers understand what you are changing when there are visual changes.

I'm glad with any design the design team may want to provide for the 'connected' info, as long as it is easily discoverable and accessible.

To me, the main goal is removing the extraneous, invalid, content from the ARIA menu. I'm also planning to create a follow-up to propose some linting tool to prevent other cases of invalid content within ARIA menus. I'd appreciate the design team to add to the guidelines that ARIA menus aren't the place for additional, extraneous, information that breaks the ARIA menu pattern.

I propose just removing it as originally intended, but not adding it to the block card.

I'm fine with removing it from the ARIA menu. However, an alternative design needs to be provided. Otherwise, there's no indication at all that a block is connected other than a different color of the block switcher icon in the block toolbar. That wouldn't be OK.

I think in previous conversations some contributors, including myself, already pointed out a few times that providing feedback by just saying 'No' isn't helpful. Design is about solving problems. Just removing this info doesn't solve the problem. Please provide an alternative option.

Cc @WordPress/gutenberg-design

I echo Rich, proposing to remove the notice. In the case of an empty menu, that means the menu disappears. That proposal is based on reducing the number of variables in the UI.

@richtabor can you please clarify what are the required code changes you asked for by submitting your code review? I don't see any. Thanks.

I echo Rich, proposing to remove the notice. In the case of an empty menu, that means the menu disappears. That proposal is based on reducing the number of variables in the UI.

@jasmussen I'm confused. What empty menu? We're discussing a place where to relocate the 'connected info' to. There must be a textual information that a block is connected. Can you please clarify? Thanks,

This PR still waits for an actionable design feedback.
The 'This block is connected.' info must be shown somewhere. The block card seems a reasonable option to me. Any other actionable design is welcome. @WordPress/gutenberg-design thanks.

Flaky tests detected in fc36e63.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12414148623
📝 Reported issues:

• [Flaky Test] Navigates the items list via UP/DOWN arrow keys #64334 in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js

Something like this seems reasonable to me.

Something like this seems reasonable to me.

Interesting. It would be nice to use the new Badge component for that, but it doesn't accept custom icons or colors. Would the 'info' badge fit this case? See the Storybook at https://wordpress.github.io/gutenberg/?path=/story/components-badge--info

I was thinking that including the connection icon would help increase familiarity about its meaning, but after a quick check it doesn't seem to be used anywhere else, so the value is questionable.

And you're right, Badge intentionally doesn't support custom colors or icons to avoid diluting intent.

So yes, perhaps the info badge could work here.

So yes, perhaps the info badge could work here.

Thanks, I'm going to try it.

Edit: I see that #65641 / #68115 just landed and added a Badge to retain the block type info when the block has a custom name:

As such, it makes sense to me to use one more badge for the 'connected info'.

In the latest commit I'm trying the Badge component.

What is the preference for the wrapping when the block name is longer? A few examples in the screenshots below:

Related also to the badge added in #65641 I would prefer the badges extra info to be placed outside from teh heading. The heading should only contain the block name, while at the moment contains also extra stuff that make the meaning of the heading not ideal. E.g,:

I guess it can be adjusted in this PR after any further design feedback has been addressed. Cc @getdave @t-hamano

This PR still waits for an actionable design feedback.
The 'This block is connected.' info must be shown somewhere.

Questioning this.

Why does "Connected" need to be shown, when it does not carry any weight or meaning other than indicating the block data source is externally sourced?

Wouldn't it be more helpful to see the actual values it's connected to? As is already the case in the "Attributes" panel. "Connected" carries no meaning on its own, without that additional context.

To me, there must be a clear indication that a block is connected. The mere presence of the Attributes section in the settings panel is not sufficient. I would love to see the 'connected' info be even more prominent in the canvas as the only indication there so far is the different color of the block switcher button icon, which is only color and not sufficient.

@WordPress/gutenberg-design I would appreciate receiving consistent and non-contradictory feedback because going back and forth to update a PR every time someone changes their mind on details that I would consider really minor is honestly frustrating.

I will put this PR on hold. Please do let me know when there's some agreement on the design. Thanks.

Regarding the most appropriate terminology to use, I would like to remind everyone that for the WordPress 6.7 release this feature has been presented to the public as the ability to connect blocks and custom fields. As such, I think the same terminology must be used in the UI.

Quoting from the release post:

Connect blocks and custom fields with no hassle (or code)

This feature introduces a new UI for connecting blocks to custom fields ...

I'll defer to Rich if he feels strongly about not highlighting this detail in the block card 👍

I kindly insist: there must be a textual indication of the 'connected' info somewhere. Please eitehr provide an alternative approach or I'd suggest to keep the Badge. Thanks.

To me, there must be a clear indication that a block is connected. The mere presence of the Attributes section in the settings panel is not sufficient. I would love to see the 'connected' info be even more prominent in the canvas as the only indication there so far is the different color of the block switcher button icon, which is only color and not sufficient.

You have indicated why—which is what I am questioning. Why is it important to see "Connected" in the block card? If it does nothing, does it need to be there?

We should not populate the UI with more information, without deeply understanding the value of that additional UI.

@WordPress/gutenberg-design I would appreciate receiving consistent and non-contradictory feedback because going back and forth to update a PR every time someone changes their mind on details that I would consider really minor is honestly frustrating.

It's critical to stress the details; something we can all be better at.

I'm merely asking a question to validate the purpose of what you'd like to add. I would think we could do this amicably.

I'm fine with removing it from the ARIA menu. However, an alternative design needs to be provided. Otherwise, there's no indication at all that a block is connected other than a different color of the block switcher icon in the block toolbar.

If color alone isn’t enough, how about including some text in the aria-label (tooltip) to indicate that the blocks are connected? Users using screen readers should be able to understand it:

If color alone isn’t enough, how about including some text in the aria-label (tooltip) to indicate that the blocks are connected? Users using screen readers should be able to understand it.

I think something like that is interesting.